<template>
  <div class="progress-container">
    <div class="progress-info" v-if="type === 'question'">
      第 {{ current }} 题 / 共 {{ total }} 题
    </div>
    <div class="progress-info" v-else>
      {{ formatTime(elapsedTime) }} / {{ formatTime(totalTime) }}
    </div>
    <div class="progress-bar">
      <div 
        class="progress-fill" 
        :style="{ width: progress + '%' }"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  current: {
    type: Number,
    default: 0
  },
  total: {
    type: Number,
    default: 100
  },
  elapsedTime: {
    type: Number,
    default: 0
  },
  totalTime: {
    type: Number,
    default: 60000 // 1 minute in milliseconds
  },
  type: {
    type: String,
    default: 'question' // 'question' | 'time'
  }
})

const progress = computed(() => {
  if (props.type === 'question') {
    return props.total > 0 ? (props.current / props.total) * 100 : 0
  } else {
    // 对于时间模式，我们希望显示剩余时间的进度
    // 所以进度应该是剩余时间占总时间的比例
    const remainingTime = Math.max(0, props.totalTime - props.elapsedTime)
    return props.totalTime > 0 ? (remainingTime / props.totalTime) * 100 : 0
  }
})

const formatTime = (milliseconds) => {
  const totalSeconds = Math.floor(milliseconds / 1000)
  const minutes = Math.floor(totalSeconds / 60)
  const seconds = totalSeconds % 60
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
}
</script>

<style scoped>
.progress-container {
  width: 100%;
}

.progress-info {
  text-align: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.progress-bar {
  height: 12px;
  background-color: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #4a90e2;
  transition: width 0.1s linear;
}
</style>